<template>
	<view style="padding: 20rpx;">
		<!-- 输入值区域 -->
		<view class="text-area" style="margin: 20rpx 0; display: flex; align-items: center;">
			<text style="font-size: 32rpx;">输入值：</text>
			<input type="text" v-model="title" style="color: orangered; border: 1px solid #ccc; padding: 10rpx; flex: 1; margin-left: 20rpx; background-color: #eee;" />
		</view>
		<!-- 回传值区域 -->
		<view class="text-area" style="margin: 20rpx 0; display: flex; align-items: center;">
			<text style="font-size: 32rpx;">回传值：</text>
			<input type="text" v-model="callBackValue" style="color: yellowgreen; border: 1px solid #ccc; padding: 10rpx; flex: 1; margin-left: 20rpx; background-color: #eee;" />
		</view>
		<!-- 子组件 -->
		<compA :intent="title"></compA>
		<compB @callBackFun="callBack"></compB>
	</view>
</template>

<script>
	import compA from '../../../../../components/compA.vue';
	import compB from '../../../../../components/compB.vue';

	export default {
		components: {
			compA,
			compB
		},
		data() {
			return {
				title: '',
				callBackValue: ''
			};
		},
		methods: {
			callBack(msg) {
				console.log("---index----callBack-->" + msg);
				this.callBackValue = msg;
			}
		}
	}
</script>

<style>
	/* 父组件输入框背景：浅灰色 */
	.text-area {
		font-size: 32rpx;
	}
</style>